<template>
    <div class="big-img">
        <div class="ineo" :class="fadeStart?'go-fade':''">
            <form>
                <van-field v-model.trim="tel" type="tel" label="手机号" autocomplete="off" />
                <van-field v-model.trim="password" type="password" label="密码" autocomplete="off" />
            </form>
            <div class="but">
                <van-button :square="true" block color="linear-gradient(to right, #151b33, #177de2)" @click="judeg">
                    登录
                </van-button>
            </div>
            <img src="~@/assets/image/tk.png" alt="">
        </div>
    </div>
</template>

<script>
    import {
        mapMutations
    } from "vuex"
    import {
        Toast
    } from 'vant'
    export default {
        data() {
            return {
                tel: '',
                password: '',
                fadeStart:0//动画
            }
        },
        methods: {
            ...mapMutations(['changeUse']),
            judeg() {
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if (reg.test(this.tel)) {
                    let pass = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                    if (pass.test(this.password)) {
                        // this.finished = true;
                        sessionStorage.setItem(
                            "user",
                            JSON.stringify('hermit')
                        );
                        this.changeUse(true)
                        this.$router.push({
                            name: 'Home'
                        })
                    } else {
                        Toast("密码至少包含 数字和英文，长度6-20");
                    }
                } else {
                    Toast("账户错误");
                }
            },
        },
        created(){
            this.fadeStart=1
        }
    }
</script>

<style lang="less" scoped>
    .big-img {
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: #000;
        background: url("~@/assets/image/0.png") no-repeat center center;
        background-size: 100% 100%;

        .ineo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60vw;
            height: 40vh;
            opacity: .8;
            box-shadow: -10px 10px 8px 6px #0f2137;

            img {
                height: 55%;
                width: 100%;
            }

            .but {
                width: 100%;
                height: 15%;
                margin: 0 auto;

                .van-button {
                    width: 100%;
                    height: 100%;
                }
            }

            .van-cell {
                // background-color: #000;
                background-image: linear-gradient(to right, #18c5fd, #dcd8e2);
                color: #fff;
            }

            /deep/ .van-cell::after {
                border: none;
            }

            .van-field {
                height: 15%;

                /deep/ .van-field__label {
                    margin-right: 0;
                }

                /deep/ span {
                    color: #fff;
                }

                /deep/ input {
                    color: #fff
                }
            }
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0.2;
            }

            50% {
                opacity: 0.4;
            }

            75% {
                opacity: 0.6;
            }

            100% {
                opacity: 0.8;
            }
        }
        .go-fade{
            animation: fade 1.3s linear
        }
    }
</style>